<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PyScript API</title>
<!--    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">-->
<!--    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">-->
<!--    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/github.min.css">-->
    <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap-icons.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/github.min.css') }}">


<!--    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>-->
    <script src="{{ url_for('static', filename='js/highlight.min.js') }}">
    <script>hljs.highlightAll();</script>
    <style>
        :root {
            --primary-color: #4e73df;
            --secondary-color: #858796;
            --success-color: #1cc88a;
            --info-color: #36b9cc;
            --warning-color: #f6c23e;
            --danger-color: #e74a3b;
            --light-color: #f8f9fc;
            --dark-color: #5a5c69;
        }

        body {
            background-color: #f8f9fc;
            font-family: 'Nunito', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        }

        .navbar {
            background: linear-gradient(135deg, var(--primary-color) 0%, #2a3f9d 100%);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .editor-container {
            height: 400px;
            border: 1px solid #ddd;
            border-radius: 4px;
            overflow: hidden;
        }

        .api-card {
            transition: transform 0.2s, box-shadow 0.2s;
            border-radius: 8px;
            overflow: hidden;
            border: none;
            box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
        }

        .api-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 0.5rem 2rem 0 rgba(58, 59, 69, 0.2);
        }

        .function-badge {
            cursor: pointer;
        }

        .card-header {
            background-color: #f8f9fc;
            border-bottom: 1px solid #e3e6f0;
        }

        .sidebar {
            position: fixed;
            top: 56px;
            left: 0;
            bottom: 0;
            width: 220px;
            padding-top: 20px;
            background-color: #fff;
            box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.1);
            z-index: 100;
        }

        .main-content {
            margin-left: 220px;
            padding: 20px;
            min-height: calc(100vh - 56px);
        }

        .sidebar .nav-link {
            color: #4e73df;
            padding: 0.75rem 1.5rem;
            border-left: 3px solid transparent;
        }

        .sidebar .nav-link:hover {
            background-color: #f8f9fc;
            border-left: 3px solid var(--primary-color);
        }

        .sidebar .nav-link.active {
            background-color: #f8f9fc;
            border-left: 3px solid var(--primary-color);
            font-weight: 600;
        }

        .api-key-container {
            background: linear-gradient(135deg, #f8f9fc 0%, #e3e6f0 100%);
            border-radius: 8px;
            padding: 20px;
            position: relative;
        }

        .api-key-value {
            font-family: monospace;
            font-size: 1.1rem;
            background-color: #fff;
            padding: 10px 15px;
            border-radius: 4px;
            border: 1px solid #e3e6f0;
        }

        .test-endpoint {
            transition: all 0.2s;
        }

        .test-endpoint:hover {
            transform: scale(1.05);
        }

        .monaco-editor {
            height: 100%;
            width: 100%;
        }

        #editor {
            height: 100%;
            min-height: 400px;
        }

        .log-entry {
            border-left: 4px solid var(--info-color);
            padding-left: 15px;
            margin-bottom: 15px;
            transition: all 0.2s;
        }

        .log-entry.success {
            border-left-color: var(--success-color);
        }

        .log-entry.error {
            border-left-color: var(--danger-color);
        }

        .log-entry:hover {
            background-color: #f8f9fc;
            transform: translateX(5px);
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="/">
                <i class="bi bi-code-slash me-2"></i>
                PyScript API
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="/settings">
                            <i class="bi bi-gear me-1"></i> Settings
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            <i class="bi bi-person-circle me-1"></i> Admin
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('logout') }}">
                            <i class="bi bi-box-arrow-right me-1"></i> 退出登录
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="sidebar d-none d-lg-block">
        <ul class="nav flex-column">
            <li class="nav-item">
                <a class="nav-link active" href="/">
                    <i class="bi bi-house-door me-2"></i> Dashboard
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/create">
                    <i class="bi bi-plus-circle me-2"></i> Create API
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/settings">
                    <i class="bi bi-shield-lock me-2"></i> API Security
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">
                    <i class="bi bi-clock-history me-2"></i> Access Logs
                </a>
            </li>
            <!-- 在base.html的侧边栏导航中添加 -->
<li class="nav-item">
    <a class="nav-link" href="/package_management">
        <i class="bi bi-box-seam me-2"></i> Package Management
    </a>
</li>

            {% if apis and apis|length > 0 %}
            <li class="nav-item mt-4">
                <div class="px-3 text-muted small">API MANAGEMENT</div>
            </li>
            {% for api_id, api in apis.items() %}
            <li class="nav-item">
                <a class="nav-link" href="/api/{{ api_id }}">
                    <i class="bi bi-box me-2"></i> {{ api.name }}
                </a>
            </li>
            {% endfor %}
            {% endif %}
        </ul>
    </div>

    <div class="main-content">
        {% block content %}{% endblock %}
    </div>

    <script src="{{ url_for('static', filename='js/bootstrap.bundle.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/axios.min.js') }}"></script>

<!--    使用npm install monaco-editor@0.34.1 或者  yarn add monaco-editor@0.34.1 把包下载下来-->
<!--    <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.1/min/vs/loader.min.js"></script>-->
    <script src="{{ url_for('static', filename='js/monaco-editor/min/vs/loader.js') }}"></script>

    <script>
        // Monaco Editor 初始化
        let editor;

        function initEditor(editorId, initialValue) {
            require.config({
                paths: {
                    //'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.1/min/vs'
                    'vs': "{{ url_for('static', filename='js/monaco-editor/min/vs') }}"
                }
            });

            require(['vs/editor/editor.main'], function() {
                editor = monaco.editor.create(document.getElementById(editorId), {
                    value: initialValue,
                    language: 'python',
                    theme: 'vs-dark',
                    minimap: { enabled: true },
                    automaticLayout: true,
                    fontSize: 14,
                    scrollBeyondLastLine: false,
                    wordWrap: 'on',
                    formatOnPaste: true,
                    formatOnType: true,
                    suggestOnTriggerCharacters: true
                });
            });
        }

        // 更新表单中的编辑器内容
        function updateEditorContent() {
            if (editor) {
                document.querySelector('textarea[name="script"]').value = editor.getValue();
            }
        }

        // 初始化编辑器
        document.addEventListener('DOMContentLoaded', function() {
            const editorElement = document.getElementById('editor');
            if (editorElement) {
                const initialValue = editorElement.dataset.initialValue || '';
                initEditor('editor', initialValue);
            }

            // 表单提交时更新内容
            const forms = document.querySelectorAll('form');
            forms.forEach(form => {
                form.addEventListener('submit', function(e) {
                    updateEditorContent();
                    return true;
                });
            });

            // 初始化工具提示
            const tooltips = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
            tooltips.map(tooltipEl => new bootstrap.Tooltip(tooltipEl));

            // 初始化弹出框
            const popovers = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
            popovers.map(popoverEl => new bootstrap.Popover(popoverEl));
        });

        // 复制到剪贴板
        function copyToClipboard(text, element) {
            navigator.clipboard.writeText(text)
                .then(() => {
                    const originalText = element.innerHTML;
                    element.innerHTML = '<i class="bi bi-check"></i> Copied!';
                    setTimeout(() => {
                        element.innerHTML = originalText;
                    }, 2000);
                })
                .catch(err => {
                    console.error('Failed to copy: ', err);
                    element.innerHTML = '<i class="bi bi-x"></i> Failed';
                    setTimeout(() => {
                        element.innerHTML = originalText;
                    }, 2000);
                });
        }
    </script>
    {% block scripts %}{% endblock %}
</body>
</html>